<template>
  <div>
    <h1>图书管理</h1>
    <!-- 图书添加表单 -->
    <div class="add-form">
      <input v-model="newBook.title" placeholder="书名" />
      <input v-model="newBook.author" placeholder="作者" />
      <input v-model.number="newBook.copies" type="number" placeholder="数量" />
      <button @click="addBook">添加图书</button>
    </div>
    <!-- 图书表格 -->
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>书名</th>
          <th>作者</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="book in books" :key="book.id">
          <td>{{ book.id }}</td>
          <td>{{ book.title }}</td>
          <td>{{ book.author }}</td>
          <td>{{ book.copies }}</td>
          <td>
            <button @click="deleteBook(book.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      books: [
        { id: 1, title: "Python编程", author: "John Doe", copies: 4 },
        { id: 2, title: "历史的秘密", author: "Jane Smith", copies: 3 },
        { id: 3, title: "宇宙探索", author: "Emily Brown", copies: 2 },
        { id: 4, title: "健康生活", author: "Mike Johnson", copies: 5 },
        { id: 5, title: "数学之美", author: "Sarah Lee", copies: 4 },
        { id: 6, title: "艺术欣赏", author: "David White", copies: 3 },
        { id: 7, title: "编程入门", author: "Alice Green", copies: 2 },
        { id: 8, title: "科幻世界", author: "Frank Black", copies: 5 },
        { id: 9, title: "自然奇观", author: "Grace Blue", copies: 4 },
        { id: 10, title: "音乐之声", author: "Tom Red", copies: 3 }
      ],
      newBook: {
        id: 11,
        title: "",
        author: "",
        copies: 0
      }
    };
  },
  methods: {
    // 添加图书方法
    addBook() {
      if (this.newBook.title && this.newBook.author && this.newBook.copies > 0) {
        this.books.push({ ...this.newBook });
        this.newBook = {
          id: this.books.length + 1,
          title: "",
          author: "",
          copies: 0
        };
      }
    },
    // 删除图书方法
    deleteBook(id) {
      this.books = this.books.filter(book => book.id !== id);
    }
  }
};
</script>

<style scoped>
.add-form {
  margin-bottom: 20px;
}

.add-form input {
  margin-right: 10px;
  padding: 5px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}
</style>